selector セレクター css
CSSでスタイルを適用する対象を指定するもの
code:selector.css
// 要素 element セレクター
h1 { }
// クラス class セレクター
.box { }
// IDセレクター
#unique { }
// 属性 attribute セレクター
atitle { }
a[href="https://example.com"] { }
// 擬似クラス Pseudo-class セレクター
a:hover { }
// 擬似要素 Pseudo-elements セレクター
p::first-line { }
// 結合子 Combinators
p::first-line { }
探索の仕方
WebPlatformApp Performance悪い書き方例
.myclass > ul > li
li 全部探して、そのうちすぐ親に ul あるの探して、そのうちすぐ親に .myclass あるやつ
ID セレクタと属性セレクタ
class selector クラスセレクターonlyがベストプラクティス?
element selector 要素セレクターなども一緒に利用したほうが良い。
Table 表 UIなど決まった要素 element HTML Design Patterns デザインパターン Codeを使っている事も多い
Game
CSS Diner - Where we feast on CSS Selectors!
https://benmyers.dev/blog/semantic-selectors/
Semantic セマンティック HTMLを利用したセレクター
area-hoge
無駄にclass作る必要が減るので良い。ideaとして頭に入れたい